<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>废弃物流向管理</title>
   <script src="../lib/jquery-1.11.3.js"></script>
   <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
 
 
  <link rel="stylesheet" href="../css/plant.css" />
  <link rel="stylesheet" href="../css/index.css" />
  <link rel="stylesheet" href="../font/font.css" />
</head>
  <style>
    #paging div:last-child div:nth-child(2) {
      opacity: 1;
      border-radius: 4px;
      font-size: 14px;
      background: rgba(255, 255, 255, 0.39);
      border: 1px solid #999999;
      color: #999;
    }
    #page span {
      border: none;
      display: inline-block;
      width: 36px;
      height: 36px;
      cursor: pointer;
    }
    .active {
      background: #4dc3b6;

      border-radius: 4px;
      border: none;
      color: #fff;
    }
    #pre,
    #next {
      cursor: pointer;
    }
</style>
<body>
  <div class="container-fluid">
    <div class="row">
      <!-- 这是侧边栏 -->
      <div id="kong" class="col-md-2"></div>
      <div id="main_menu" class="col-md-2">
        <ul id="myul">
          <li id="logoli">
            <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
            </div>
          </li>
          <li id="have">
            <div><span class="iconfont icon-tongji"></span>统计</div>
            <ul>
              <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
              <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
              <li><a href="../pages/dj03.html">人员统计</a> </li>
            </ul>
          </li>
          <li>
            <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
            <ul>
              <li><a href="../pages/plant.html">蔬果</a></li>
              <li><a href="../pages/farming.html">肉类</a></li>
            </ul>
          </li>
          <li>
            <div><span class="iconfont icon-caigou"></span>采购收购</div>
            <ul>
              <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
              <li><a href="../pages/pick_fruit.html">蔬果</a></li>
              <li><a href="../pages/pick_meat.html">肉类</a></li>
            </ul>

          </li>
          <li>
            <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输</div>
            <ul>
              <li><a href="../pages/tran_meat.html">肉类运输</a> </li>
              <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
            </ul>

          </li>
          <li>
            <div><span class="iconfont icon-xinruku"></span>仓库</div>
            <ul>
              <li><a href="../pages/stockIn.html">入库</a></li>
              <li><a href="../pages/stockOut.html">出库</a></li>
            </ul>

          </li>
          <li>
            <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
            </div>
          </li>
          <li>
            <div><span class="iconfont icon-xiaoshou"></span>销售</div>
            <ul>
              <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
              <li><a href="../pages/online_sho_by.html">网购</a></li>
              <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
              <li><a href="../pages/zx_pima.html">批码管理</a></li>
            </ul>

          </li>
          <li>
            <div id="logo"><span class="iconfont icon-lajitong"></span><a href="../pages/waste_management.html">废料去向</a>
            </div>
          </li>
          <li>
            <div><span class="iconfont icon-guanliyuan"></span>管理</div>
            <ul id="secondary">
              <li><a href="../pages/dj01.html">人员管理</a> </li>
              <li><a href="../pages/dj02.html">操作日志</a> </li>
              <li><a href="../pages/board.html">留言板</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="left_content" class="col-md-10">
        <!-- 这是头 -->
        <nav id="main_headnav">
          <div class="clear">
            <div class="navlefspan">
              <span class="iconfont icon-caidan" id="hidenmenu"></span>
              <span class="mytitle">食品流通安全管理系统</span>
            </div>
            <div class="navrigspan">
              <span class="iconfont icon-tixing" id="tx"></span>
              <!-- 头像 -->
              <img src="../images/shouye/tx.jpg" alt="">
              <!-- 姓名 -->
              <span id="tc">退出</span>
            </div>
          </div>
          <div>
            <!-- 这里写小的头 -->
          </div>
        </nav>
        <div id="main_content">
          <div id="mycentent">
            <!-- 这是内容 -->
            <div id="box">
              <div id="main">
                <p id="mynav">
                  <span>废弃物流向</span>
                <p>
                  秉承着废弃物一日一清的原则，将每天产生的废弃物（如包装袋、不新鲜的蔬菜、烂果等），以是否可以回收为大标准，将废弃物分类后通过不同渠道处理。
                </p>
                <ol>
                  <li>包装类废弃物：一般分类后直接由合作的回收站上门回收；</li>
                  <li>不新鲜的蔬果等：经过挑拣由合作的养猪场等回收做饲料；</li>
                  <li>不可回收做饲料的:直接由合作的处理废弃物处理公司拉走集中处理。</li>
                </ol>
                <!-- <span>></span><span class="mycolor2"></span> -->
                </p>
                <div id="add">
                  <span>废弃物流向管理</span>
                  <button id="addWaste">新增</button>

                </div>
                <div id="search" class="row">
                  <span>时间</span><input type="date" id="w_date" />
                  <span>废弃物种类</span><select name="" id="w_species">
                    <option value="1"></option>
                    <option value="2">可做猪饲料类</option>
                    <option value="3">可回收包装类</option>
                    <option value="4">不可回收</option>
                  </select>
                  <span>合作单位</span><input type="text" placeholder="请输入" id="w_partner" value="" />
                  <button id="find">查询</button>
                  <button id="reset">重置</button>
                </div>
                <table class="table table-bordered" id="mytable">
                  <thead>
                    <tr>
                      <th>离场时间</th>
                      <th>废弃物种类</th>
                      <th>重量(单位：千克)</th>
                      
                      <th>回收合作单位</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
              <div id="paging" class="clear">
                <div>
                  跳至
                  <input type="text" placeholder="5"  id="jumpPage" />
                  页
                </div>
                <div>
                  <select name="" id="inPage">
                    <option value="">10条/页</option>
                    <option value="">20条/页</option>
                    <option value="">30条/页</option>
                  </select>
                </div>
                <div class="clear" id="page">
                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 修改 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">修改</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="s_name">离场时间</label>
                <input type="date" class="form-control" id="s_name" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">废弃物种类</label>
               <select name="" id="edit_w_species">
                   
                    <option value="1">可做猪饲料类</option>
                    <option value="2">可回收包装类</option>
                    <option value="3">不可回收</option>
                  </select>
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">重量（单位：千克）</label>
                <input type="text" class="form-control" id="s_tele" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">回收合作单位</label>
                <select name="" id="outParnter">
                  <option value="1">a垃圾站</option>
                  <option value="2">b养猪场</option>
                </select>
              </div>
              
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              id="confirm"
             
            >
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
<!-- 增加 -->
    <div
      class="modal fade"
      id="myModal1"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">新增</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="recipient-name" class="s_name">离场时间</label>
                <input type="date" class="form-control" id="s_name1" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">废弃物种类</label>                
                <select name="" id="s_contact1">                   
                    <option value="1">可做猪饲料类</option>
                    <option value="2">可回收包装类</option>
                    <option value="3">不可回收</option>
                  </select>
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">重量</label>
                <input type="text" class="form-control" id="s_tele1" />
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">合作单位</label>
                
                <select name="" id="s_address1">
                  <option value="1">a垃圾站</option>
                  <option value="2">b养猪场</option>
                </select>
              </div>
              
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button type="button" class="btn btn-primary" id="addConfirm">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
</body>
<script src="../js/index.js"></script>
<script>
  //  $('#add button').click(() => {
  //     window.location = './plant-add.html'
  // })
  window.onload = function () {
    let x = $("#box").width()
    $('#box').width(x)
  }

  let count = 10;
    let page = 1;
    let maxPage;
    let id_val;
    getData()
   function getData() {
      $.ajax({
        url: "/waste/get",
        data: {
          count: count,
          page: page,
          w_date:$('#w_date').val(),
          w_parnter:$("#w_partner").val(),
          w_species: $("#w_species").find("option:selected").text()
          
        },
        success: (res) => {
          if (res.code == 302) {
            location.href = "/";
            return;
          }
          if (res.error) {
            console.log(res.error);
          } else {
            //列表渲染
            $("tbody").html("");
            $(res.searchDate).each((i, v) => {
              $("tbody").append(`
                            <tr data-id="${v.w_id}">
                                <td>${v.w_date.substring(0,10)}</td>
                                <td>${v.w_species}</td>
                                <td>${v.w_weight}</td>
                          <td>${v.p_name}</td>
                          
                                <td>
                                    <a class="edit">修改</a>

                                </td>
                            </tr>
                        `);
            });
            //页码渲染

            $("#page").html(`<div id="pre">
                      <p><</p>
                    </div>
                    <div id="next">
                      <p>></p>
                    </div>`);
            maxPage = Math.ceil(res.total / count);
            for (let i = maxPage; i >= 1; i--) {
              if (page == i) {
                $("#pre").after(`
                <div><span class="active"> ${i}</span></div>

                            `);
              } else {
                $("#pre").after(`
                <div><span> ${i}</span></div>
                 `);
              }
            }
          }
        },
      });
    }
   
    // 点击页码
$("#page").on("click", "span", function () {
      page = $(this).text();
      getData();
    });
    // 上一页
    $("#page").on("click", "#pre", function () {
      if (page > 1) {
        page--;
        getData();
        console.log(res.total);
      }
    });
    //下一页
    $("#page").on("click", "#next", function () {
      if (page < maxPage) {
        page++;
        getData();
      }
    });
    // 跳转页码

    $("#jumpPage").blur(function () {
      page = $("#jumpPage").val();
      getData();
    });
    // 分页条数设置
    $("#inPage").blur(function () {
      let a = parseInt($("#inPage").find("option:selected").text());
      count = a;
      getData();
    });

 //查询
    $("#find").click(() => {
      page = 1;
      count = 10;
      getData();
    });

    //重置
    $("#reset").click(() => {
      page = 1;
      count = 10;
      $("#w_date").val("");
      $("#w_species option[value='1']").prop("selected", "selected");
      $("#w_partner").val("");
     
      getData();
    });


//修改

    $("tbody").on("click", ".edit", function () {
      $("#myModal").modal({
        keyboard: false,
      });
      // 打开模态框时填入原数据
      id_val = $(this).parents("tr").attr("data-id");
      let a = $(this).parents("tr").children().eq(0).text();
      let b = $(this).parents("tr").children().eq(1).text();
      let c = $(this).parents("tr").children().eq(2).text();
      let d = $(this).parents("tr").children().eq(3).text();

      $("#s_name").val(a);
      $("#s_contact").val(b);
      $("#s_tele").val(c);
      $("#s_address").val(d);
    });
    // 确认时修改数据
    $("#confirm").click(() => {
      let a = $("#s_name").val();
      let b = $("#edit_w_species").find("option:selected").text();
      let c = $("#s_tele").val();
      let d = $("#outParnter").find("option:selected").val();
     
      $("#myModal").modal("hide");
      $.ajax({
        url: "/waste/edit",
        // method: "post",
        data: {
          id: id_val,
          w_date: a,
          w_species: b,
         w_weight: c,
          w_partner_id: d,
        },
        success: (res) => {
          if (res.error) {
            console.log(res.msg);
          } else {
            alert("修改成功");
            
            getData();
          }
        },
      });
    });

// 新增
$("#addWaste").click(() => {
      $("#myModal1").modal({
        keyboard: false,
      });
    });
    $("#addConfirm").click(() => {
      let a = $("#s_name1").val();
      let b = $("#s_contact1").find("option:selected").text();
      let c = $("#s_tele1").val();
      let d = $("#s_address1").find("option:selected").val();
      $("#myModal1").modal("hide");
      $.ajax({
        url: "/waste/Add",
        method: "post",
        data: {
          w_date: a,
          w_species: b,
          w_weight: c,
          w_partner_id: d,
         
        },
        success: (res) => {
          alert('添加成功')
          getData();
        },
      });
    });

</script>

</html>